<template>
	<navigatorComp
		:title="
			isDetail
				? '亲人详情'
				: isEdit
				? '编辑资料'
				: `添加${typeOptions[familyInfo.addType].label}`
		"
		bgcColor="#121512"
		fontColor="#fff"
	></navigatorComp>
	<view class="content" :style="{ pointerEvents: isDetail ? 'none' : '' }">
		<view class="content_box">
			<view class="content_box_title" style="padding-left: 20rpx">
				<view v-if="!isDetail" class="star">*</view>
				家族称呼
			</view>
			<u-form
				label-width="100"
				:label-style="{ fontSize: '28rpx', color: '#ffffff' }"
				:model="familyInfo.call"
				ref="uForm"
			>
				<view class="display_flex" :style="{ justifyContent: 'flex-start' }">
					<!-- 亲人,儿子 -->
					<u-form-item
						v-if="familyInfo.addType === 0 || familyInfo.addType === 1"
						labelWidth="50rpx"
					>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.xi"
								color="#fff"
								fontSize="28rpx"
								placeholder="姓氏"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.xi }}
							</view>
						</view>
						<view style="margin-right: 16rpx" class="value">公</view>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.da"
								color="#fff"
								fontSize="28rpx"
								placeholder="多少代"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.da }}
							</view>
						</view>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.ch"
								color="#fff"
								fontSize="28rpx"
								placeholder="尊称"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.ch }}
							</view>
						</view>
						<view class="value">之派系</view>
					</u-form-item>

					<!-- 女儿 -->
					<u-form-item v-if="familyInfo.addType === 2" labelWidth="50rpx">
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.xi"
								color="#fff"
								fontSize="28rpx"
								placeholder="姓氏"
								maxlength="10"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.xi }}
							</view>
						</view>
						<view style="margin-right: 16rpx" class="value">族</view>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.da"
								color="#fff"
								fontSize="28rpx"
								placeholder="父亲名"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.da }}
							</view>
						</view>
						<view style="margin-right: 16rpx" class="value">之</view>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.ch"
								color="#fff"
								fontSize="28rpx"
								placeholder="排行"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.ch }}
							</view>
						</view>
						<view class="value">女儿</view>
					</u-form-item>
					<!-- 妻子 -->
					<u-form-item
						v-if="relationKinsfolkGender === 1 && familyInfo.addType === 3"
						labelWidth="50rpx"
					>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.xi"
								color="#fff"
								fontSize="28rpx"
								placeholder="配偶姓氏"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.xi }}
							</view>
						</view>
						<view style="margin-right: 16rpx" class="value">氏</view>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.da"
								color="#fff"
								fontSize="28rpx"
								placeholder="多少代"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.da }}
							</view>
						</view>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.ch"
								color="#fff"
								fontSize="28rpx"
								placeholder="男配偶名"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.ch }}
							</view>
						</view>
						<view class="value">之妻</view>
					</u-form-item>

					<!-- 女婿 -->
					<u-form-item
						v-if="relationKinsfolkGender === 2 && familyInfo.addType === 3"
						labelWidth="50rpx"
					>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.xi"
								color="#fff"
								fontSize="28rpx"
								placeholder="配偶姓氏"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.xi }}
							</view>
						</view>
						<view style="margin-right: 16rpx" class="value">氏</view>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.da"
								color="#fff"
								fontSize="28rpx"
								placeholder="多少代"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.da }}
							</view>
						</view>
						<view style="width: 116rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.call.ch"
								color="#fff"
								fontSize="28rpx"
								placeholder="女配偶名"
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.call.ch }}
							</view>
						</view>
						<view class="value">之夫</view>
					</u-form-item>
				</view>
			</u-form>
		</view>

		<view class="content_box">
			<view class="content_box_title" v-if="!isEdit">详细资料</view>
			<u-form
				:label-style="{ fontSize: '28rpx', color: '#ffffff', lineHeight: '33rpx' }"
				:model="familyInfo.detail"
				ref="uForm"
			>
				<u-row style="width: 100%" gutter="10" justify="space-between">
					<u-col span="6">
						<!-- 女儿的时候，是配偶姓氏 -->
						<u-form-item
							:label="familyInfo.addType === 2 ? '配偶姓氏' : '姓氏'"
							prop="xi"
							:labelWidth="familyInfo.addType === 2 ? 75 : 45"
						>
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.detail.xi"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="20"
							/>
							<view v-else class="value">
								{{ familyInfo.detail.xi }}
							</view>
						</u-form-item>
					</u-col>
					<u-col span="6">
						<u-form-item label="派系:" prop="px">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.detail.px"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="4"
							/>
							<view v-else class="value">
								{{ familyInfo.detail.px }}
							</view>
						</u-form-item>
					</u-col>
					<!-- 只有男性的配偶有这个字段，女婿没有, 女儿没有 -->
					<u-col
						span="6"
						v-if="
							!(
								(relationKinsfolkGender == 2 && familyInfo.addType === 3) ||
								familyInfo.addType == 2
							)
						"
					>
						<u-form-item label="世别:" prop="sb">
							<view class="value">第</view>
							<view style="width: 56rpx; margin: 0 8rpx">
								<u-input
									v-if="!isDetail"
									v-model.trim="familyInfo.detail.sb"
									color="#fff"
									fontSize="28rpx"
									border="bottom"
									placeholder=""
									maxlength="20"
									inputAlign="center"
								/>
								<view v-else class="value">
									{{ familyInfo.detail.sb }}
								</view>
							</view>
							<view class="value">
								{{
									familyInfo.addType === 0 || familyInfo.addType === 1
										? '世祖'
										: '世祖嬷'
								}}
							</view>
						</u-form-item>
					</u-col>
					<!-- 女儿没有 -->
					<u-col span="6" v-if="familyInfo.addType !== 2">
						<u-form-item label="辈份:" prop="bf">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.detail.bf"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="4"
							/>
							<view v-else class="value">
								{{ familyInfo.detail.bf }}
							</view>
						</u-form-item>
					</u-col>
					<!-- 只有女儿有 -->
					<u-col span="6" v-if="familyInfo.addType === 2">
						<u-form-item label="父亲名:" prop="fm" :labelWidth="60">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.detail.fm"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="4"
							/>
							<view v-else class="value">
								{{ familyInfo.detail.fm }}
							</view>
						</u-form-item>
					</u-col>
					<!-- 只有女儿有 -->
					<u-col span="6" v-if="familyInfo.addType === 2">
						<u-form-item label="女儿排行:" prop="ph" :labelWidth="75">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.detail.ph"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="4"
							/>
							<view v-else class="value">
								{{ familyInfo.detail.ph }}
							</view>
						</u-form-item>
					</u-col>
					<u-col span="6">
						<u-form-item label="生名:" prop="name" :required="!isDetail">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.name"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="20"
							/>
							<view v-else class="value">
								{{ familyInfo.name }}
							</view>
						</u-form-item>
					</u-col>
					<u-col span="6" v-if="familyInfo.addType !== 2">
						<u-form-item label="卒孝名:" labelWidth="58" prop="kataka">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.detail.zx"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="4"
							/>
							<view v-else class="value">
								{{ familyInfo.detail.zx }}
							</view>
						</u-form-item>
					</u-col>
					<u-col span="6">
						<u-form-item label="生日:" prop="birthday">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.birthday"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="20"
							/>
							<view v-else class="value">
								{{ familyInfo.birthday }}
							</view>
						</u-form-item>
					</u-col>
					<u-col span="6" v-if="familyInfo.addType !== 2">
						<u-form-item label="祭日:" prop="jr">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.detail.jr"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="4"
							/>
							<view v-else class="value">
								{{ familyInfo.detail.jr }}
							</view>
						</u-form-item>
					</u-col>
					<u-col span="12" v-if="familyInfo.addType === 2">
						<u-form-item label="出嫁地:" prop="jd" labelWidth="61">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.detail.jd"
								color="#fff"
								fontSize="28rpx"
								border="none"
								placeholder="请输入"
								maxlength="20"
							/>
							<view v-else class="value">
								{{ familyInfo.detail.jd }}
							</view>
						</u-form-item>
					</u-col>
				</u-row>
			</u-form>
		</view>

		<!-- 其他资料
			亲人和儿子展示
		 -->
		<view class="content_box" v-if="familyInfo.addType === 0 || familyInfo.addType === 1">
			<view class="content_box_title" v-if="!isEdit">其他资料</view>
			<u-form
				:label-style="{ fontSize: '28rpx', color: '#ffffff' }"
				:model="familyInfo.other"
				ref="uForm"
			>
				<view class="display_flex" style="justify-content: flex-start">
					<u-form-item label="" prop="">
						<view style="margin-right: 8rpx" class="value">在生排行第</view>
						<view style="width: 76rpx; margin-right: 8rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.other.ph"
								color="#fff"
								fontSize="28rpx"
								placeholder=""
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.other.ph }}
							</view>
						</view>
						<view style="margin-right: 8rpx" class="value">共</view>
						<view style="width: 76rpx; margin-right: 8rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.other.gd"
								color="#fff"
								fontSize="28rpx"
								placeholder=""
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.other.gd }}
							</view>
						</view>
						<view style="margin-right: 8rpx" class="value">丁，配偶</view>
						<view style="width: 76rpx; margin-right: 8rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.other.xi"
								color="#fff"
								fontSize="28rpx"
								placeholder=""
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.other.xi }}
							</view>
						</view>
						<view style="margin-right: 8rpx" class="value">氏</view>
					</u-form-item>
				</view>
				<u-form-item label="卒孝名:" prop="" labelWidth="60">
					<u-input
						v-if="!isDetail"
						v-model.trim="familyInfo.other.zx"
						color="#fff"
						fontSize="28rpx"
						placeholder="请输入"
						maxlength="20"
						inputAlign="left"
						border="none"
					/>
					<view v-else class="value">
						{{ familyInfo.other.zx }}
					</view>
				</u-form-item>
				<view class="display_flex" style="justify-content: flex-start">
					<u-form-item label="" prop="">
						<view style="margin-right: 16rpx" class="value">本世派下子女</view>
						<view style="width: 76rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.other.man"
								color="#fff"
								fontSize="28rpx"
								placeholder=""
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.other.man }}
							</view>
						</view>
						<view style="margin-right: 16rpx" class="value">男</view>
						<view style="width: 76rpx; margin-right: 16rpx; text-align: center">
							<u-input
								v-if="!isDetail"
								v-model.trim="familyInfo.other.wom"
								color="#fff"
								fontSize="28rpx"
								placeholder=""
								maxlength="20"
								inputAlign="center"
								border="bottom"
							/>
							<view v-else class="value">
								{{ familyInfo.other.wom }}
							</view>
						</view>
						<view class="value">女</view>
					</u-form-item>
				</view>
				<u-form-item label="墓址:" prop="tombSite" labelWidth="45">
					<u-input
						v-if="!isDetail"
						v-model.trim="familyInfo.other.addr"
						color="#fff"
						fontSize="28rpx"
						placeholder="请输入"
						maxlength="20"
						inputAlign="left"
						border="none"
					/>
					<view v-else class="value">
						{{ familyInfo.other.addr }}
					</view>
				</u-form-item>
				<u-form-item label="配偶分葬墓址:" prop="mateTombSite" labelWidth="110">
					<u-input
						v-if="!isDetail"
						v-model.trim="familyInfo.other.fz"
						color="#fff"
						fontSize="28rpx"
						placeholder="请输入"
						maxlength="20"
						inputAlign="left"
						border="none"
					/>
					<view v-else class="value">
						{{ familyInfo.other.fz }}
					</view>
				</u-form-item>
			</u-form>
		</view>

		<!-- 其他资料2 
			添加配偶
		-->
		<view class="content_box" v-if="familyInfo.addType === 3">
			<view class="content_box_title" v-if="!isEdit">其他资料</view>
			<u-form
				:label-style="{ fontSize: '28rpx', color: '#ffffff' }"
				:model="familyInfo.other"
				ref="uForm"
			>
				<!-- 女婿：女系称呼
				配偶：男系称呼 -->
				<u-form-item
					:label="relationKinsfolkGender === 2 ? '女系称呼:' : '男系称呼:'"
					prop=""
					labelWidth="75"
				>
					<u-input
						v-if="!isDetail"
						v-model.trim="familyInfo.other.call"
						color="#fff"
						fontSize="28rpx"
						placeholder="请输入"
						maxlength="20"
						inputAlign="left"
						border="none"
					/>
					<view v-else class="value">
						{{ familyInfo.other.call }}
					</view>
				</u-form-item>
				<u-form-item
					:label="relationKinsfolkGender === 2 ? '女系卒孝名:' : '男系卒孝名:'"
					prop=""
					labelWidth="90"
				>
					<u-input
						v-if="!isDetail"
						v-model.trim="familyInfo.other.zx"
						color="#fff"
						fontSize="28rpx"
						placeholder="请输入"
						maxlength="20"
						inputAlign="left"
						border="none"
					/>
					<view v-else class="value">
						{{ familyInfo.other.zx }}
					</view>
				</u-form-item>
				<u-form-item label="出生于:" prop="mateTombSite" labelWidth="60">
					<u-input
						v-if="!isDetail"
						v-model.trim="familyInfo.other.cs"
						color="#fff"
						fontSize="28rpx"
						placeholder="请输入"
						maxlength="20"
						inputAlign="left"
						border="none"
					/>
					<view v-else class="value">
						{{ familyInfo.other.cs }}
					</view>
				</u-form-item>
				<u-form-item label="墓址:" prop="tombSite" labelWidth="45">
					<u-input
						v-if="!isDetail"
						v-model.trim="familyInfo.other.addr"
						color="#fff"
						fontSize="28rpx"
						placeholder="请输入"
						maxlength="20"
						inputAlign="left"
						border="none"
					/>
					<view v-else class="value">
						{{ familyInfo.other.addr }}
					</view>
				</u-form-item>
			</u-form>
		</view>

		<!-- 备注 -->
		<view class="content_box" style="padding-bottom: 32rpx">
			<view class="content_box_title">备注</view>
			<up-textarea
				v-if="!isDetail"
				disableDefaultPadding
				placeholderClass="placeholderClass"
				color="#fff"
				fontSize="28rpx"
				v-model="familyInfo.summarize"
				placeholder="请输入简介"
				height="400rpx"
				border="none"
				count
				maxlength="200"
			></up-textarea>
			<view v-else class="value">
				{{ familyInfo.summarize }}
			</view>
		</view>

		<footerBtn
			v-if="!isDetail"
			bgcColor="#121512"
			:btnDisable="btnDisable"
			name="保存"
			@clickBtn="handleAchieve"
		></footerBtn>
	</view>

	<!-- 选择头像 -->
	<myPopup
		v-model:show="chooseAvaterData.show"
		title="选择头像"
		bgColor="#1E201F"
		fontColor="#fff"
		:custom-style="{ minHeight: '524rpx' }"
	>
		<view style="padding: 32rpx 64rpx">
			<view class="family_avaterList">
				<image
					v-for="(item, index) in chooseAvaterData.avaterList"
					@click="chooseAvater(item)"
					:src="item"
					mode="widthFix"
					:class="familyInfo.headUrl === item && 'family_avater_active'"
				></image>
				<image
					src="http://112.124.50.179:8888/imgs/home/family_upload.png"
					mode=""
					@click="uploadImg"
				></image>
			</view>
		</view>
	</myPopup>

	<!-- 选择备注弹框 -->
	<myPopup
		v-model:show="remarkPopup.show"
		title="选择备注"
		bgColor="#1E201F"
		fontColor="#fff"
		height="760rpx"
		@closeCallback="closeRemark_callback"
	>
		<view style="padding: 32rpx">
			<view class="remarkList">
				<view
					@click="chooseRemark(item)"
					v-for="(item, index) in remarkPopup.remarkList"
					:class="['remark', remarkPopup.choosedRemark === item ? 'remark_active' : '']"
				>
					{{ item }}
				</view>
			</view>
		</view>
		<footerBtn bgcColor="#1E201F" name="确定" @clickBtn="confirmRemark"></footerBtn>
	</myPopup>

	<!-- 当亲人不在世的时候，弹出弹框 -->
	<myModel v-model:show="showModel" title="" :showCancelBtn="false" :showConfirmBtn="false">
		<view class="family_model">
			<view class="family_model_close">
				<u-icon name="close" color="#666666" size="23" @click="showModel = false"></u-icon>
			</view>
			<view class="family_model_content">
				愿逝者安息。愿生者坚强在这个艰难时刻,请知道我们与你们同在,愿美好的回忆带给你们安慰,请接受我们最深切的哀悼。
			</view>
			<view class="family_model_btnList">
				<view
					class="family_model_btn"
					@click="
						goUrl('/subPages/home/memoryHall/create_memoryHall');
						showModel = false;
					"
				>
					创建纪念馆
				</view>
				<view
					class="family_model_btn family_model_btn2"
					@click="
						goUrl('/subPages/home/obituary/index');
						showModel = false;
					"
				>
					发布讣告
				</view>
			</view>
		</view>
	</myModel>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, watchEffect, getCurrentInstance } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import pickerAddress from '/components/picker/addressPicker.vue';
import footerBtn from '/components/footerBtn/index.vue';
import myPopup from '/components/popup/index.vue';
import myModel from '/components/model/index.vue';
import { timeFormat } from '@/node_modules/uview-plus';
import HomeApi from '@/API/home/index.js';
import _ from 'lodash';
const homeApi = new HomeApi();

//微信小程序上支持类型穿透
defineOptions({
	options: {
		styleIsolation: 'shared'
	}
});

const $chooseImg = getCurrentInstance().appContext.config.globalProperties.$chooseImg;

const btnDisable = ref(true); //按钮是否可点击
const genealogyId = ref(0); //族谱id
const isDetail = ref(false); //是否是详情页
const relationKinsfolkGender = ref(0); //关联人员的性别
const familyInfo = reactive({
	relationKinsfolkId: 0, //关联亲属id
	kinsfolkId: 0, //亲人id
	addType: 0, //添加类型
	name: '',
	birthday: '',
	summarize: '',
	detail: {},
	other: {},
	call: {}
});
const tempAddress = ref([]); //地址临时存储位置
const birthday = ref(new Date()); //生日临时存储位置
const weddingDay = ref(new Date()); //纪念日临时存储位置

const showBirth = ref(false);
const showWeddingDay = ref(false);
const showModel = ref(false);

const isEdit = ref(false); //是否是编辑页
const role = ref(''); //亲人的角色
const typeOptions = [
	{
		label: '亲人',
		value: 0
	},
	{
		label: '儿子',
		value: 1
	},
	{
		label: '女儿',
		value: 2
	},
	{
		label: '配偶',
		value: 3
	}
];

// 选择备注弹框
const remarkPopup = reactive({
	show: false,
	choosedRemark: '',
	remarkList: [
		'慈父',
		'入赘',
		'吾夫',
		'吾妻',
		'先祖父',
		'先祖母',
		'先外祖父',
		'先外祖母',
		'先兄',
		'先姐',
		'先弟',
		'先妹'
	]
});

// 选择头像
const chooseAvaterData = reactive({
	show: false,
	avaterList: []
});

onLoad((options) => {
	genealogyId.value = options.genealogyId; //族谱id
	familyInfo.kinsfolkId = options.kinsfolkId || 0; //亲人id
	familyInfo.relationKinsfolkId = options.relationKinsfolkId || 0; //关联的亲人id
	relationKinsfolkGender.value = Number(options.relationKinsfolkGender) || 0; //关联人员的性别
	familyInfo.addType = Number(options.addType) || 0; //添加类型
	familyInfo.gender = options.gender ? Number(options.gender) : 1; //添加人员的性别
	isDetail.value = Number(options.isDetail) ? true : false;

	if (options.kinsfolkId) {
		isEdit.value = true;
		getKinsfolkInfo();
	} else {
		isEdit.value = false;
	}
});

watchEffect(() => {
	if (familyInfo.gender === 1) {
		//男
		for (let i = 0; i < 4; i++) {
			chooseAvaterData.avaterList[i] = `http://112.124.50.179:8888/imgs/home/boy${i + 1}.png`;
		}
		console.log(chooseAvaterData.avaterList);
	} else {
		//女
		for (let i = 0; i < 4; i++) {
			chooseAvaterData.avaterList[i] = `http://112.124.50.179:8888/imgs/home/girl${
				i + 1
			}.png`;
		}
	}
});

watchEffect(() => {
	if (familyInfo.name && familyInfo.call.xi && familyInfo.call.da && familyInfo.call.ch) {
		btnDisable.value = false;
	} else {
		btnDisable.value = true;
	}
});

/**
 * 获取亲人基本信息
 */
const getKinsfolkInfo = () => {
	uni.showLoading();
	homeApi
		.getKinsfolkInfo({
			genealogyId: genealogyId.value,
			kinsfolkId: familyInfo.kinsfolkId
		})
		.then((res) => {
			if (res.code === 0) {
				Object.keys(res.data).forEach((item) => {
					familyInfo[item] = res.data[item];
				});
				familyInfo.ancestralHomeland = res.data.ancestralHomeland.replace(/,/g, '');
				tempAddress.value = res.data.ancestralHomeland.split(',');
				familyInfo.call = familyInfo.call ? JSON.parse(familyInfo.call) : {};
				familyInfo.detail = familyInfo.detail ? JSON.parse(familyInfo.detail) : {};
				familyInfo.other = familyInfo.other ? JSON.parse(familyInfo.other) : {};
			}
			uni.hideLoading();
		});
};

/**
 * 切换是否在世
 */
const changeIsLive = () => {
	console.log(familyInfo.whetherSurvival);
	if (familyInfo.whetherSurvival === 2) {
		//不在世弹出弹框
		showModel.value = true;
	}
};

/**
 * 点击选择头像
 */
const chooseAvater = (item) => {
	familyInfo.headUrl = item;
	chooseAvaterData.show = false;
};

/**
 * 点击添加头像
 */
const uploadAvater = () => {
	chooseAvaterData.show = true;
};

const handleAchieve = _.debounce(
	() => {
		achieve();
	},
	2000,
	{ leading: true, trailing: false }
);

/**
 * 点击完成
 */
const achieve = () => {
	uni.showLoading();
	let params = {
		genealogyId: genealogyId.value,
		...familyInfo,
		opType: familyInfo.kinsfolkId ? 2 : 1, //操作类型（1:创建/添加，2:修改）
		surname: familyInfo.call.xi,
		detail: JSON.stringify(familyInfo.detail),
		other: JSON.stringify(familyInfo.other),
		call: JSON.stringify(familyInfo.call)
	};
	homeApi.addKinsfolk(params).then((res) => {
		if (res.code === 0) {
			uni.hideLoading();
			uni.showToast({
				title: familyInfo.kinsfolkId ? '编辑成功！' : '添加成功',
				duration: 500
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 500);
		}
	});
};

/**
 * 前往个人简介编辑页
 */
const goEditSummarize = () => {
	uni.navigateTo({
		url: `/subPages/home/clan/edit_briefIntro?summarize=${familyInfo.summarize}`,
		events: {
			// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			getSummberize: function (data) {
				familyInfo.summarize = data.summarize;
			}
		}
	});
};

/**
 * 上传文件
 */
const uploadImg = () => {
	$chooseImg
		.chooseImg({
			formData: {
				fileType: 'image',
				fileDirType: 'personal'
			},
			countLimit: 1
		})
		.then((res) => {
			chooseAvaterData.avaterList.push(JSON.parse(res[0].img_url.data).fileUrl);
		});
};

const confirmBirth = (e) => {
	familyInfo.birthday = timeFormat(e.value, 'yyyy-mm-dd');
	showBirth.value = false;
};
const confirmWeddingDay = (e) => {
	familyInfo.weddingDay = timeFormat(e.value, 'yyyy-mm-dd');
	showWeddingDay.value = false;
};

const changeAddress = (e) => {
	tempAddress.value = JSON.parse(JSON.stringify(e.data));
	familyInfo.ancestralHomeland = e.data.join('');
};

/**
 * 打开备注弹框
 */
const openRemarkPopup = () => {
	remarkPopup.show = true;
	remarkPopup.choosedRemark = familyInfo.remark;
};

/**
 * 点击备注
 */
const chooseRemark = (item) => {
	remarkPopup.choosedRemark = item;
};

/**
 * 选择备注——点击确定
 */
const confirmRemark = () => {
	familyInfo.remarks = remarkPopup.choosedRemark;
	remarkPopup.show = false;
};

const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	return value;
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
}

.content_box {
	background-color: #121512;
	margin: 24rpx 0 0;
	box-sizing: border-box;
	padding: 40rpx 32rpx 0;
	background: linear-gradient(225deg, rgba(41, 43, 42, 0.5) 0%, rgba(138, 145, 142, 0.5) 100%);
	border-radius: 8rpx;

	.content_box_title {
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;
		margin-bottom: 32rpx;
		display: flex;
		align-items: center;
		position: relative;
	}

	.star {
		position: absolute;
		left: 0px;
		color: #f56c6c;
		line-height: 20px;
		font-size: 20px;
		top: 3px;
	}

	::v-deep .u-border-bottom,
	.up-border-bottom {
		border-color: #666666 !important;
	}

	::v-deep .u-input {
		padding: 0 !important;
	}

	::v-deep .u-form-item__body__right__content__slot {
		display: flex !important;
	}

	::v-deep .input-placeholder {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
	}

	::v-deep .u-form-item__body {
		padding: 0 !important;
		margin-bottom: 32rpx !important;
	}

	::v-deep .placeholderClass {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
	}

	::v-deep .u-textarea {
		background: rgba(255, 255, 255, 0.1) !important;
		padding: 32rpx 40rpx !important;
		box-sizing: border-box !important;
	}

	::v-deep .u-textarea__field {
		color: #fff !important;
		font-size: 28rpx !important;
		text-align: justify !important;
	}

	::v-deep .u-textarea__count {
		background: none !important;
		font-weight: 400 !important;
		font-size: 28rpx !important;
		color: #999999 !important;
		line-height: 33rpx !important;
		margin-right: 25rpx;
		margin-bottom: 24rpx;
		padding: 0;
	}

	.arrow_right {
		width: 40rpx;
		height: 40rpx;
	}

	.placeHolder {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 33rpx;
		text-align: right;
	}

	.value {
		color: #ffffff;
		font-weight: 400;
		font-size: 28rpx;
	}
}

.family_model {
	position: relative;
	width: 100%;

	.family_model_close {
		position: absolute;
		right: -16rpx;
		top: 16rpx;
	}

	.family_model_content {
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 42rpx;
		text-align: justify;
		margin-top: 60rpx;
	}

	.family_model_btnList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;

		.family_model_btn {
			width: 210rpx;
			height: 80rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 2rpx solid #f3e0bb;
			font-weight: 400;
			font-size: 28rpx;
			color: #0e0e0e;
			line-height: 80rpx;
			text-align: center;
		}

		.family_model_btn2 {
			background-color: #f3e0bb;
		}
	}
}

.remarkList {
	display: flex;
	flex-wrap: wrap;
	margin-right: -20rpx;

	.remark {
		padding: 0 24rpx;
		min-width: 160rpx;
		box-sizing: border-box;
		height: 60rpx;
		background: #333333;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 60rpx;
		text-align: center;
		margin-right: 16rpx;
		margin-bottom: 24rpx;
	}

	.remark_active {
		background-color: #f3e0bb;
		color: #0e0e0e;
	}
}

.u-row {
	flex-wrap: wrap !important;
	margin: 0 !important;
}

.u-col {
	padding: 0 !important;
}

.u-col:nth-child(2n-1) {
	padding-right: 30rpx !important;
}
</style>